<mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
<div *ngIf="!recoveryCodes">
    <h4>Generate two-factor authentication (2FA) recovery codes</h4>
    <div>
      <b>Put these codes in a safe place.</b>
      <p>If you lose your device and don't have the recovery codes you will lose access to your account.</p>
      <p>Generating new recovery codes does not change the keys used in authenticator apps.
        If you wish to change the key used in an authenticator app you should <a [routerLink]="['../reset']" routerLinkActive="router-link-active" >reset your authenticator keys</a>.</p>
    </div>

    <button mat-raised-button color="warn" cdkFocusInitial (click)="onGenerateRecoveryCodesClick()">Generate Recovery Codes</button>
</div>
<app-show-recovery-two-factor *ngIf="recoveryCodes" [recoveryCodes]="recoveryCodes"></app-show-recovery-two-factor>
